import { useEffect, useState } from "react"
import { Stencil } from '@antv/x6-plugin-stencil'
import { createImageNodes } from "./graph"
import { ComSearch } from "./com-serach"
import { Modal, Form, Input } from 'antd'

export const FlowItem = ({ graph, openMenu }) => {
  useEffect(() => {
    if (!graph) {
      return
    }

    const stencil = new Stencil({
      title: '流程项',
      target: graph,
      stencilGraphWidth: 260,
      stencilGraphHeight: 140,
      collapsable: true,
      groups: [
        {
          title: '常用',
          collapsed: true,
          name: 'group3',
        },
        {
          title: '系统项',
          collapsed: true,
          name: 'group2',
          graphHeight: 250,
          layoutOptions: {
            rowHeight: 50,
          },
        },
      ],
      layoutOptions: {
        columns: 3,
        columnWidth: 80,
        rowHeight: 55,
      },
    })

    document.getElementById('flowItem').appendChild(stencil.container)

    const r1 = graph.createNode({
      shape: 'custom-rect',
      label: '开始',
      attrs: {
        body: {
          rx: 20,
          ry: 26,
        },
      },
    })
    const r2 = graph.createNode({
      shape: 'custom-rect',
      label: '过程',
    })
    const r3 = graph.createNode({
      shape: 'custom-rect',
      attrs: {
        body: {
          rx: 6,
          ry: 6,
        },
      },
      label: '可选过程',
    })
    const r4 = graph.createNode({
      shape: 'custom-polygon',
      attrs: {
        body: {
          refPoints: '0,10 10,0 20,10 10,20',
        },
      },
      label: '决策',
    })
    const r5 = graph.createNode({
      shape: 'custom-polygon',
      attrs: {
        body: {
          refPoints: '10,0 40,0 30,20 0,20',
        },
      },
      label: '数据',
    })
    const r6 = graph.createNode({
      shape: 'custom-circle',
      label: '连接',
    })
    // stencil.load([r1, r2, r3, r4, r5, r6], 'group1')

    const imageShapes = [
      {
        label: 'Client',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg',
      },
      {
        label: 'Http',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg',
      },
      {
        label: 'Api',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg',
      },
      {
        label: 'Sql',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg',
      },
      {
        label: 'Clound',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg',
      },
      {
        label: 'Mq',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg',
      },
    ]

    stencil.load(createImageNodes(graph, imageShapes), 'group2')
  }, [graph])

  const onContextMenu = (event) => {
    event.preventDefault()
    openMenu(event)
  }

  const [isOpen, setIsOpen] = useState(false)
  const [form] = Form.useForm()
  const handleOk = () => {
    setIsOpen(false)
  }
  const handleCancel = () => {
    setIsOpen(false)
  }

  return <>
    <div className="com-container">
      <ComSearch onAdd={() =>  setIsOpen(true)} />
      <div className="com-content" onContextMenu={onContextMenu}>
        <div id="flowItem" className="flow-item">

        </div>  
      </div>
    </div>
    <Modal
        centered
        width={400}
        title='新建流程'
        open={isOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form form={form}>
          <Form.Item label="流程名称" name="name">
            <Input autoComplete='off'/>
          </Form.Item>
        </Form>
    </Modal>
  </>
}

export default FlowItem